<!DOCTYPE html>
<p>There should be one hotpink and one blue square below.</p>
<div style="columns:2; column-gap:0; column-fill:auto; orphans:1; widows:1; line-height:20px; width:100px; height:120px;">
    <div style="height:80px;"></div>
    <table cellspacing="0" cellpadding="0" style="width:100%;">
        <col style="width:50%;">
        <col style="width:50%;">
        <tr>
            <td rowspan="2">
                <div style="margin-left:auto; width:10px; height:20px; background:hotpink;"></div>
                <br>
                <br>
                <div style="width:20px; height:10px; border-bottom:10px solid blue;"></div>
            </td>
            <td>
                <div style="width:10px; height:20px; background:hotpink;"></div>
            </td>
        </tr>
        <tr>
            <td>
                <br>
                <br>
            </td>
        </tr>
        <tr>
            <td>
                <div style="width:20px; height:10px; border-top:10px solid blue;"></div>
            </td>
        </tr>
    </table>
</div>
